<template>
  <div class="layout">
    <el-tabs type="border-card">
      <!-- 登录 -->
      <el-tab-pane label="登录">
        <el-form
          label-position="right"
          label-width="60px"
          style="max-width: 460px"
          class="loginForm"
        >
          <el-form-item label="账号：">
            <el-input v-model="zhanghao" placeholder="咿呀哟" />
          </el-form-item>
          <el-form-item label="密码：">
            <el-input type="password" v-model="password" placeholder="123456" />
          </el-form-item>

          <el-row>
            <el-checkbox
              class="checkBox"
              v-model="isAgree"
              label="同意用户使用准则"
              name="type"
            />
          </el-row>
            <el-button
            v-if="isAgree"
            type="primary"
            class="loginBtn"
            @click="login"
          >
            登录
          </el-button>
        </el-form>
      </el-tab-pane>
      <!-- 注册 -->
      <el-tab-pane label="注册">
        <el-form
          label-position="right"
          label-width="100px"
          style="max-width: 460px"
          class="loginForm"
        >
          <el-form-item label="账号：">
            <el-input v-model="rzhanghao" plea />
          </el-form-item>
          <el-form-item label="密码：">
            <el-input type="password" v-model="rPassword" />
          </el-form-item>
          <el-form-item label="确认密码：">
            <el-input
              type="password"
              v-model="confirmPassword"
              @blur="confirmFunc"
            />
          </el-form-item>
    
          <el-row>
            <el-checkbox
              class="checkBox"
              v-model="rAgree"
              label="同意用户使用准则"
              name="type"
            />
          </el-row>
          <el-button
            v-if="rAgree"
            type="primary"
            class="loginBtn"
            @click="register"
          >
            注册
          </el-button>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { reactive, toRefs } from "@vue/reactivity";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import useUserStore from '../store/module/user.js';

export default {
  setup() {
    const router = useRouter()
    const userStore = useUserStore()
    const form = reactive({
      zhanghao: "",
      password: "",
      isAgree: 0,
    });
    const registerForm = reactive({
      rzhanghao: "",
      rPassword: "",
      confirmPassword: "",
      identifyCode: "",
      rAgree: 0,
    });

    // 方法
    // 登录
    function login() {
      if (form.zhanghao === '咿呀哟' && form.password === '123456') {
        userStore.updateUserInfo({username: form.zhanghao, password: form.password})
        ElMessage.success("登录成功！");
        router.replace('/');
      } else {
        ElMessage.error("账号或密码错误！")
      }
    }
    // 注册
    function register() {
     if (registerForm.confirmPassword !== registerForm.rPassword){
 ElMessage.error("密码与确认密码不一致，请重新输入");
     }
      else{
       ElMessage.error("注册成功")
      
    }
    }
    // 勾选提示
    const confirmFunc = () => {
      if (registerForm.confirmPassword !== registerForm.rPassword)
        ElMessage.error("密码与确认密码不一致.");
    };
    return {
      ...toRefs(form),
      ...toRefs(registerForm),
      login,
      register,
      confirmFunc,
    };
  },
};
</script>

<style scoped>

.layout {
  position: absolute;
  left: calc(50% - 200px);
  top: 20%;
  width: 400px;
}
.loginBtn {
  width: 100px;
}
.loginForm {
  text-align: center;
}
.checkBox {
  margin-left: 7px;
}
</style>